<template> 
  <div class="mpvue-picker" >
    <div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div>
    <div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
      <div class="mpvue-picker__hd" catchtouchmove="true">
        <div class="mpvue-picker__action" @click="pickerCancel">取消</div>
        <div class="mpvue-picker__action" @click="pickerConfirm">确定</div>
      </div>
      <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
        <block>
          <picker-view-column>
            <div class="picker-item" v-for="(item,index) in provinceDataList" :key="index">{{item.provinceName}}</div>
          </picker-view-column>
					
          <picker-view-column>
            <div class="picker-item" v-for="(item,index) in cityDataList" :key="index">{{item.cityName }}</div>
          </picker-view-column>
					
          <picker-view-column>
            <div class="picker-item" v-for="(item,index) in districtList" :key="index">{{item.districtName}}</div>
          </picker-view-column>
        </block>
      </picker-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
			showPicker: false,
    };
  },
	
	computed:{
		pickerValue:function(){
				return this.$globalData.state.cityInfo.pickerValue;
		},
		provinceDataList:function(){
				return this.$globalData.state.cityInfo.provinceList;
		},
		cityDataList:function(){
				return this.$globalData.state.cityInfo.cityList;
		},
		districtList:function(){
				return this.$globalData.state.cityInfo.districtList;
		}
	},
	
  created() {
    this.init()
  },
  props: ['defaultValue','apiType','entrance'],
	watch:{
		// defaultValue(){
		// 	this.init();
		// }
	},
  methods: {
		
    show() {
			// this.$globalData.state.cityInfo.pickerValue =[0,0,0]
      setTimeout(() => {
        this.showPicker = true;
      }, 0);
    },
		
		//根据城市code获取城市列表index
		getCityIndex(code,list){
			for (let i=0; i<list.length; i++) {
				if(list[i].provinceCode== code || list[i].cityCode== code || list[i].districtCode == code){
					return i;
				}
			}
			return -1;
		},
			
		//获取省
		getProvince(){
			if(this.apiType == 'integral'){
				let params = {
					queryType:0
				}
				return this.$request("product/queryJfDistrictList",params).then(res=>{
					this.$globalData.commit('cityInfo/setProvinceList',res.districtList);
				});
			}else{
				return this.$request("commonability/queryProvinceList",{}).then(res=>{
					this.$globalData.commit('cityInfo/setProvinceList',res.provinceInfoList);
				});
			}
		},
		//获取市
		getCity(pid){
			if(this.apiType == 'integral'){
				let params = {
					queryType:2,
					districtId:pid
				}
				return this.$request("product/queryJfDistrictList",params).then(res=>{
					this.$globalData.commit('cityInfo/setCityList',res.districtList);
				});
			}else{
				return this.$request("commonability/queryCityList",{provinceCode:pid}).then(res=>{
					this.$globalData.commit('cityInfo/setCityList',res.cityInfoList);
				});
			}
		},
		//获取地区
		getDistrict(cid){
			if(this.apiType == 'integral'){
				let params = {
					queryType:3,
					districtId:cid
				}
				return this.$request("product/queryJfDistrictList",params).then(res=>{
					this.$globalData.commit('cityInfo/setDistrictList',res.districtList);
				});
			}else{
				return this.$request("commonability/queryDistrictList",{cityCode:cid}).then(res=>{
					this.$globalData.commit('cityInfo/setDistrictList',res.districtInfoList);
				});
			}
		},
		
		init:async function() {
			if(this.defaultValue){
				var _this = this;
				Promise.all([this.getProvince(),this.getCity(this.defaultValue.provinceCode),this.getDistrict(this.defaultValue.cityCode)]).then(res=>{
					this.defaultCityIndex = [
						this.getCityIndex(this.defaultValue.provinceCode,this.$globalData.state.cityInfo.provinceList ),
						this.getCityIndex(this.defaultValue.cityCode,this.$globalData.state.cityInfo.cityList ),
						this.getCityIndex(this.defaultValue.districtCode,this.$globalData.state.cityInfo.districtList )
					];
					this.$globalData.state.cityInfo.pickerValue = this.defaultCityIndex;
				})
			}else{
				this.$globalData.state.cityInfo.pickerValue = [0,0,0];
				await this.getProvince();
				await this.getCity(this.$globalData.state.cityInfo.provinceList[0].provinceCode);
				await this.getDistrict(this.$globalData.state.cityInfo.cityList[0].cityCode);
			}
		},
		
		//地址改变触发
    pickerChange:async function(e) {
      let changePickerValue = e.mp.detail.value;
      if (this.pickerValue[0] !== changePickerValue[0]) {// 第一级发生滚动-省改变
        await this.getCity(this.provinceDataList[changePickerValue[0]].provinceCode);//重新获取市
				this.getDistrict(this.cityDataList[0].cityCode);//重新获取县
        changePickerValue[1] = 0;
        changePickerValue[2] = 0;
      } else if (this.pickerValue[1] !== changePickerValue[1]) {// 第二级滚动-市改变
        this.getDistrict(this.cityDataList[changePickerValue[1]].cityCode);//重新获取县
        changePickerValue[2] = 0;
      }
			this.$globalData.commit('cityInfo/setPickerValue',changePickerValue)
    },
		
		maskClick() {
		  this.pickerCancel();
		},
		pickerCancel() {
		  this.showPicker = false;
		  this._$emit('onCancel');
		},
		pickerConfirm(e) {
		  this.showPicker = false;
		  this._$emit('onConfirm');
		},
		showPickerView() {
		  this.showPicker = true;
		},
		
    _$emit(emitName) {
      let pickObj = {
        label: this._getLabel(),
        value: this.pickerValue,
        provinceCode: this._getProvinceCode(),
        cityCode: this._getCityCode(),
        districtCode: this._getDistrictCode(),
      };
      this.$emit(emitName, pickObj);
    },
    _getLabel() {
	  let connect = this.entrance=='goodsDetail'?'>':'-';
      let pcikerLabel =
        this.provinceDataList[this.pickerValue[0]].provinceName +
        connect +
        this.cityDataList[this.pickerValue[1]].cityName +
        connect +
        this.districtList[this.pickerValue[2]].districtName;
		
		
      return pcikerLabel;
    },
    _getProvinceCode() {
      return this.provinceDataList[this.pickerValue[0]].provinceCode;
    },
		_getCityCode() {
		  return this.cityDataList[this.pickerValue[1]].cityCode;
		},
		_getDistrictCode() {
		  return this.districtList[this.pickerValue[2]].districtCode;
		}
  }
};
</script>

<style>
.pickerMask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.mpvue-picker-content {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s ease;
  transform: translateY(100%);
  z-index: 3000;
}
.mpvue-picker-view-show {
  transform: translateY(0);
}
.mpvue-picker__hd {
  display: flex;
  padding: 9px 15px;
  background-color: #fff;
  position: relative;
  text-align: center;
  font-size: 17px;
}
.mpvue-picker__hd:after {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #e5e5e5;
  color: #e5e5e5;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}
.mpvue-picker__action {
  display: block;
  flex: 1;
  color: #1aad19;
}
.mpvue-picker__action:first-child {
  text-align: left;
  color: #888;
}
.mpvue-picker__action:last-child {
  text-align: right;
}
.picker-item {
  text-align: center;
  line-height: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}
.mpvue-picker-view {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 238px;
  background-color: rgba(255, 255, 255, 1);
}
</style>
